<meta charset="utf-8">
<link href="css/iframes.css" rel="stylesheet" type="text/css" />

<!-- <iframe src="iframes-middle.html" style="border: solid 2px black"></iframe> -->
<iframe src="iframe.html" style="width:500px;height:500px;"></iframe>
<script src="js/iframes.js"></script>
<!-- <script src="../js/interact-1.1.2.js"></script> -->
<!-- <script src="../js/interact.js"></script> -->
<script>
    document.querySelector('iframe').onload = function (event) {
        window.interact = frames[0].interact;

        setInteractables();
    };
</script>

<div class="draggable">
    <label>Username</label>
    <input type="text">
</div>
<!-- <div class="draggable" style="width: 30px; height: 30px; background-color:greenyellow;"></div>
<div style="width:30px; height: 30px;" class="draggable">
    <p>An element in the TOP frame</p>
</div> -->